<template>
  <h1>v-for列表渲染</h1>
  <ul>
    <li v-for="(item, key, index) in myObject">
      {{ key }}-----<span>{{ item }}</span>-----{{ index }}
    </li>
  </ul>
  <p v-for="(item, index) in 7">{{ index }}-----{{ item }}</p>
  <ul v-for="numbers in sets">
    <li v-for="n in even(numbers)">{{ n }}</li>
  </ul>
</template>

<script setup>
import { ref, reactive } from 'vue'

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})


const sets = ref([
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10]
])

function even(numbers) {
  return numbers.filter((number) => number % 2 === 0)
}
</script>
<script>
export default {
  name: ''
}
</script>

<style scoped></style>